<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 图片在线地址：
    鸟：https://s3.ax1x.com/2021/01/24/sbijRf.png
    下管道：https://s3.ax1x.com/2021/01/24/sbivz8.png
    上管道：https://s3.ax1x.com/2021/01/24/sbiXJP.png
    背景：https://s3.ax1x.com/2021/01/24/sbiOit.png -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bg {
            width: 742px;
            height: 600px;
            background: url(https://s3.ax1x.com/2021/01/24/sbiOit.png);
            position: relative;
            margin: 0 auto;
            overflow: hidden;
            max-width: 800px !important;
        }

        .bird {
            width: 34px;
            height: 25px;
            background: url(https://s3.ax1x.com/2021/01/24/sbijRf.png) -10px -8px no-repeat;
            position: absolute;
            top: 200px;
            left: 100px;
        }

        .start {
            display: inline-block;
            /* display: none; */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            padding: 10px 20px;
            border: 1px solid #333;
            border-radius: 3px;
            background-color: #e9fcd9;
            box-shadow: 1px 1px 5px 1px #333;
            cursor: pointer;
            z-index: 999;
        }

        .restart {
            display: inline-block;
            display: none;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            padding: 10px 20px;
            border: 1px solid #333;
            border-radius: 3px;
            background-color: #e9fcd9;
            box-shadow: 1px 1px 5px 1px #333;
            cursor: pointer;
            z-index: 999;
        }

        .set {
            display: inline-block;
            width: 25px;
            height: 20px;
            margin: 5px 5px;
            padding: 10px 10px;
            line-height: 20px;
            background-color: #e9fcd9;
            border: 1px solid #666;
            box-shadow: 1px 1px 3px #666;
            border-radius: 50%;
            cursor: pointer;
            z-index: 999;
        }

        .setConBox {
            display: none;
            width: 200px;
            /* height: 200px; */
            position: absolute;
            left: 50%;
            top: 50%;
            padding: 20px 20px;
            box-sizing: border-box;
            transform: translate(-50%, -60%);
            background-color: #e9fcd9;
            border: 1px solid #333;
            border-radius: 5px;
            box-shadow: 3px 4px 4px #666;
            cursor: default;
            z-index: 999;
        }

        .setConBox div {
            margin: 10px 0;
        }

        input {
            width: 30px;
            float: right;
            text-align: center;
            border: 1px solid #666;
        }

        button {
            width: 20px;
            float: right;
            border: 1px solid #666;
            border-radius: 2px;
            cursor: pointer;
            background-color: #fff;
        }

        input:focus,
        button:focus {
            outline: none;
        }

        .setConBox .close {
            width: 50px;
            height: 30px;
            /* background-color: rgb(239, 239, 239); */
            background-color: #fff;
            text-align: center;
            line-height: 30px;
            margin: 0 auto;
            border: 1px solid #666;
            border-radius: 2px;
            cursor: pointer;
        }
    </style>
    <!-- jq在线地址(字节跳动) -->
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="bg">
        <div class="bird"></div>
        <div class="start">开始游戏</div>
        <div class="restart">重新开始</div>
        <div class="set">设置
            <div class="setConBox">
                <!-- 鸟儿体重
                    1: -> 下降1
                    2: -> 下降2
                    3: -> 下降3（初始）
                    4: -> 下降4
                    5: -> 下降5
                -->
                <div class="weight">
                    <span>鸟儿体重：</span>
                    <button class="more">+</button>
                    <input type="text" placeholder="3" value="3">
                    <button class="less">-</button>
                </div>
                <!-- 速度 
                    1: -> 80毫秒
                    2: -> 50毫秒
                    3: -> 40毫秒
                    4: -> 30毫秒（初始）
                    5: -> 20毫秒
                    6: -> 10毫秒
                    7: -> 5毫秒
                -->
                <div class="speed">
                    <span>速度：</span>
                    <button class="more">+</button>
                    <input type="text" placeholder="3" value="3">
                    <button class="less">-</button>
                </div>
                <!-- 鸟儿弹跳能力
                    1: -> 上升2
                    2: -> 上升4
                    3: -> 上升6（初始）
                    4: -> 上升8
                -->
                <div class="jump">
                    <span>鸟儿弹跳能力：</span>
                    <button class="more">+</button>
                    <input type="text" placeholder="2" value="3">
                    <button class="less">-</button>
                </div>
                <!-- 管道水平间距
                    1: -> 间距50px
                    2: -> 间距100px
                    3: -> 间距150px
                    4: -> 间距200px（初始）
                    5: -> 间距250px
                    6: -> 间距300px
                -->
                <div class="horz">
                    <span>管道水平间距：</span>
                    <button class="more">+</button>
                    <input type="text" placeholder="4" value="4">
                    <button class="less">-</button>
                </div>
                <!-- 管道垂直间距
                    1: -> 间距190px
                    2: -> 间距180px（初始）
                    3: -> 间距170px
                    4: -> 间距160px
                    5: -> 间距150px
                    6: -> 间距140px
                -->
                <div class="vert">
                    <span>管道垂直间距：</span>
                    <button class="more">+</button>
                    <input type="text" placeholder="3" value="2">
                    <button class="less">-</button>
                </div>
                <div class="close">关闭</div>
            </div>
        </div>
    </div>
</body>
<script src="js/index.js"></script>

</html>